<template>
  <div class="bonus">
    <div class="sub-title">
      <div class="content"><span>奖金项：{{bonusItem.bonusItemName}}</span><span>奖金编码：{{bonusItem.eccCode}}</span></div>
    </div>
    <div class="search-form flex-l-r">
      <div class="flex">
        <el-form :inline="true" :model="searchForm" >
          <el-form-item label="子奖金项名称">
            <el-input v-model="searchForm.bonusItemName" placeholder="奖金项" clearable></el-input>
          </el-form-item>
          <!--        <el-form-item label="奖金编号">
                    <el-input v-model="searchForm.eccCode" placeholder="奖金编号" clearable></el-input>
                  </el-form-item>-->
        </el-form>
        <div>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
      </div>
      <el-button type="primary" plain @click="goBack">返回</el-button>
    </div>
    <div>
      <div class="menu-left">
        <el-button type="primary" @click="add">新增</el-button>
        <el-button type="danger" plain @click="del(true)">删除</el-button>
        <el-button type="primary" plain>模版下载</el-button>
        <el-button type="primary" plain>导入</el-button>

      </div>
      <el-table :data="tableData" v-loading="loading" border  @selection-change="handleSelectionChange" :height="`calc(100vh - 260px )`">
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="45">
        </el-table-column>
        <el-table-column
          width="60px"
          prop=""
          label="序号"
          align="center"
        >
          <template slot-scope="scope">
            {{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column
          prop="bonusItemName"
          label="子奖金项名称"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="eccCode"
          label="ECC奖金编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="bonusItemCode"
          label="系统内奖金项编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="bonusItemDeptName"
          label="负责机构/部门（二级）"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="bonusItemScope"
          label="奖项范围"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="bonusItemDescription"
          label="奖金项说明"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </div>
    <!--新增、编辑-->
    <decomposeForm ref="handleForm" :bonusItemDeptIdOptions="bonusItemDeptIdOptions" :bonusItemsScopeOptions="bonusItemsScopeOptions" @refresh="refresh"></decomposeForm>
  </div>
</template>

<script>
import decomposeForm from "@/views/bonusmanage/items/decomposeForm";
import {deleteBatch, getChildren, getPid} from '@/api/bonus/items'
import {remote as remoteDict} from '@/api/admin/dict';
export default{
  name:"decompose",
  props:{
    bonusItemDeptIdOptions:{
      type:Array,
      default:[]
    },
  },
  components:{
    decomposeForm
  },
  data() {
    return {
      show:true ,
      loading:false,
      page:{
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      filteredData:[],
      searchForm: {bonusItemDeptId:''},
      bonusItemsScopeOptions:[
        {label:'公共',value:'公共'},
        {label:'私有',value:'私有'}
      ], //奖金范围
      multipleSelection: [],
      ids:[],
      bonusItem:{},

    }
  },
  computed: {

  },
  created(){

  },
  methods:{
    init(data,deptId){
      this.bonusItem = data ;
      this.deptId = deptId ;
      this.onLoad() ;
      //获取奖金项范围（字典）
      //this.getBonusItemScope() ;
    },
    getBonusItemScope(){
      remoteDict("bonusScope").then(res => {
        this.bonusItemsScopeOptions = res.data.data
      })
    },
    handleSearch(){
      this.onLoad() ;
    },
    onLoad(){
      this.loading = true ;
      getChildren(this.bonusItem.id,this.deptId).then(res=>{
        if (res.data.code == 0){
          this.tableData =  res.data.data.filter((data) => {
            return !this.searchForm.bonusItemName || data.bonusItemName.includes(this.searchForm.bonusItemName)
          })
          //this.doLayout() ;
        }else{
          this.$message.error(res.data.msg)
        }
        this.loading = false ;
      }).catch(()=>{
        this.loading = false ;
      })
    },
    handleSelectionChange(list){
      this.multipleSelection = list ;
      this.ids = this.multipleSelection.map((ele) => {
        return ele.id
      })
    },
    add(){
      this.$refs.handleForm.init('add',{},this.bonusItem,this.deptId)
    },
    edit(item){
      this.$refs.handleForm.init('edit',item,this.bonusItem,this.deptId)
    },
    /**
     *
     * @param batch true 批量 false 单条
     * @param item  单条时，传本条数据
     */
    del(batch,item){
      let msg = '' ;
      let ids = ''
      if (batch){ //批量
        msg = '确定删除选中的数据吗?'
        if (this.multipleSelection.length == 0){
          this.$message.error('请勾选要删除的数据')
          return ;
        }
        ids = this.ids.toString() ;
      }else{ //单条
        msg = '确定删除此条数据吗?'
        ids = item.id ;
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true ;
        deleteBatch({ids:ids}).then(res=>{
          this.$message.success('操作成功')
          this.onLoad() ;
          this.loading = false ;
        }).finally(()=>{
          this.loading = false ;
        })
      }).catch(() => {

      });
    },
    decompose(item){

    },
    refresh(){
      this.onLoad() ;
    },
    goBack(){
      this.$emit('close')
    }
  }
}
</script>
<style scoped>

</style>
